<template>
  <div>
    <div style="margin-top: 10px;margin-bottom: 10px;">
      <el-input v-model="filterText" placeholder="输入关键字进行查询" clearable />
    </div>
    <!-- 树 -->
    <el-tree ref="menuTree" node-key="id" :data="menuTree" :props="defaultProps" :filter-node-method="filterNode"
      @node-click="getNodeData" :expand-on-click-node="false" class="filter-tree" style="height: 100%;overflow: auto"
      highlight-current />
  </div>
</template>

<script>
  import {
    getAllMenuTree,
  } from '@/api/sys/menu/index';
  import {
    getObj
  } from '@/api/common';

  /* 工具 */
  import * as common from '@/utils/base/common';

  export default {
    /* 菜单管理 - tree  */
    name: 'menu-tree',
    data() {
      return {
        filterText: '', // 查询参数
        menuTree: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }, // 配置选项

      }
    },
    props: ['restPath'],
    created() {
      this.getAllMenuTree()
    },
    watch: {
      // 通过关键字过滤树节点
      filterText(val) {
        this.$refs.menuTree.filter(val)
      },
    },
    methods: {

      // 后台获取列表数据
      getAllMenuTree() {
        this.listLoading = true;
        getAllMenuTree().then(response => {
          this.menuTree = response.data
        }).catch(err => {
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      // 节点被点击时, 获取该节点数据
      getNodeData(data) {
        getObj(this.restPath, data.id).then(response => {
          let menuData = {
            treeNode: data, // tree节点数据
            baseMenu: response.data // menu表数据
          }
          this.$emit('getNodeData', menuData) // 向父组件传递所选节点数据
        }).catch(err => {
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },

    }
  }
</script>

<style scoped>

</style>
